<template>
  <u-popup
    mode="bottom"
    v-model="show"
    :closeable="true"
    :mask-close-able="false"
    @close="onClose"
  >
    <view class="goods-card">
      <view class="goods-card__cover">
        <image
          v-if="detail.banner"
          :src="detail.banner.split(',')[0]"
          mode="scaleToFill"
          class="goods-card__img am-wh-100 am-block"
          webp
        ></image>
        <view
          class="goods-card__sell-out am-flex-rc-center"
          v-if="val.stock == 0"
        >
          <image
            src="/static/images/icon-sell-out.png"
            mode="scaleToFill"
            class="goods-card__sell-out-img am-block"
          >
          </image>
        </view>
      </view>
      <view class="goods-card__con">
        <view
          v-if="curSupplierLevel != null && curSupplierLevel != 0"
          style="color: #f65300"
          >会员价:
          <text
            >￥{{
              curSupplierLevel == 1
                ? val.price
                : curSupplierLevel == 2
                ? val.price2
                : curSupplierLevel == 3
                ? val.price3
                : val.purchasePrice
            }}</text
          >
        </view>
        <view
          class="nowrap-s"
          :class="
            curSupplierLevel != null && curSupplierLevel != 0 ? 'vipClass' : ''
          "
          style="color: #f65300"
          >零售价: <text>￥{{ val.purchasePrice }}</text></view
        >
        <view
          v-if="val.originalPrice"
          class="product-goods-price nowrap-s original-price"
          >原价: {{ val.originalPrice }}</view
        >
      </view>
    </view>
    <view class="spec-box">
      <text class="text">规格</text>
      <view class="spec-box-child">
        <view
          v-for="(item, ind) in detail.skuChildList"
          :key="ind"
          :class="ind == index ? 'spec-tab tabActive' : 'spec-tab'"
          @click="tabClick(item, ind)"
        >
          {{ item.spec }}
          <text class="out-of-stock" v-if="item.stock == 0">缺货</text>
        </view>
      </view>
    </view>
    <view class="number">
      <text
        >购买数量<text class="kc">（库存{{ val.stock }}件）</text></text
      >
      <uni-number-box
        :min="1"
        :max="val.stock"
        :disabled="val.stock == 0"
        v-model="num"
      ></uni-number-box>
    </view>
    <view class="btn" v-if="val.stock > 0" @click.stop="goodSub">{{
      type == 1 ? '加入购物车' : '立即购买'
    }}</view>
    <view class="prohibit" v-if="val.stock == 0">库存不足</view>
  </u-popup>
</template>

<script>
import { checkProductSku } from '@/api/order.js'
export default {
  name: 'payment',
  props: {
    showModal: {
      type: Boolean
    },
    // 全部
    detail: {
      type: Object,
      default: () => {}
    },
    // 从哪里来
    type: {
      type: Number,
      default: () => 1
    }
  },
  computed: {
    curSupplierLevel() {
      return this.$store.getters.curSupplierLevel
    }
  },
  data() {
    return {
      show: false,
      index: 0,
      val: {},
      num: 1
    }
  },

  watch: {
    //因为是单项数据流,v-modal控制的组件显示隐藏,父组件不可以通过props内的参数直接改变子元素参数,所以我们通过watch来监控数据的变化,间接修改show的数据
    showModal(val) {
      this.show = val
      if (val) {
        this.num = 1
        this.val = this.detail.skuChildList[this.index]
      }
    }
  },
  methods: {
    tabClick(item, ind) {
      this.index = ind
      this.val = item
    },
    goodSub() {
      checkProductSku({ skuList: [this.val.sku] }).then((res) => {
        let { state, data, msg, code } = res.data
        if (code === '200') {
          this.$emit('submit', {
            num: this.num,
            pid: this.val.pid,
            sku: this.val.sku,
            val: {
              banner: this.detail.banner
                ? this.detail.banner.split(',')[0]
                : '',
              num: this.num,
              pid: this.val.pid,
              sku: this.val.sku,
              name: this.detail.name,
              price: this.val.purchasePrice,
              caskBack: this.val.caskBack,
              incentivePayments: this.val.incentivePayments,
              pointExchange: this.val.pointExchange,
              spec: this.val.spec,
              stock: this.val.stock,
              id: this.detail.id
            }
          })
        } else {
          this.$am_toast.warning(msg)
        }
      })
    },
    onClose() {
      this.index = 0
      this.show = false
      this.$emit('close', this.show) //通知父组件隐藏了
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-card {
  display: flex;
  padding: 16rpx;
  align-items: stretch;
  //   border-radius: 24rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #ccc;
}

.goods-card__cover {
  overflow: hidden;
  position: relative;
  width: 222rpx;
  height: 222rpx;
  flex-shrink: 0;
  border-radius: 15rpx;
}

.goods-card__sell-out {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(#000, 0.5);
}

.goods-card__sell-out-img {
  width: 97rpx;
  height: 45rpx;
}

.goods-card__con {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 0;
  margin-left: 20rpx;
}

.spec-box {
  padding: 16rpx;
}

.text {
}

.spec-box-child {
  display: flex;
  font-size: 26rpx;
  flex-wrap: wrap;
}

.spec-tab {
  position: relative;
  padding: 5rpx 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 12rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
}

.out-of-stock {
  position: absolute;
  background: #ccc;
  color: #fff;
  padding: 5rpx;
  border-radius: 10rpx;
  top: -18rpx;
  right: -26rpx;
}

.tabActive {
  color: rgb(255, 102, 51);
  border-color: rgb(255, 102, 51);
}

.number {
  margin-top: 30rpx;
  border-top: 1rpx solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 16rpx;
  align-items: center;
}

.kc {
  color: #ccc;
}

.btn {
  margin-top: 100rpx;
  width: 100%;
  height: 85rpx;
  line-height: 85rpx;
  text-align: center;
  background: #fe6507;
  color: #fff;
}

.prohibit {
  margin-top: 100rpx;
  width: 100%;
  height: 85rpx;
  line-height: 85rpx;
  text-align: center;
  background: #ccc;
  color: #fff;
}

.vipClass {
  text-decoration: line-through;
  color: #f65300;
}

.product-goods-price {
  font-size: 28rpx;
  color: #999999;
}
.nowrap-s {
  width: 400rpx;
  word-wrap: break-word;
}
</style>
